﻿<html><head><title>Task 37</title>
<style type="text/css">
body{
margin:50px 200px 0 200px;
background-color:gray;
}
h1{
color:white; 
font-size:200%;
}
p{
color:#cccccc; 
font-size:200%;
font-weight:700;
}
input{
background-color:#dddddd;
border:none;
width:inherit;
text-align:center;
font-size:400%;
color:white;
font-weight:800;
}
input[type=reset]{
background-color:gray;
border:1px solid #cccccc;
font-size:150%;
cursor:pointer;
margin-top:50px;
padding:7px;
}
td{
text-align:center;
background-color:#dddddd;
border:gray 4px solid;
width:100px;
height:100px;
}
</style>

<script type="text/javascript">
    var playeR = "First";
    var zed = 0;

    function startOff() {
        document.getElementById('whichplayer').innerHTML = playeR;
        document.minIn.t1v.value = "";
        document.minIn.t2v.value = "";
        document.minIn.t3v.value = "";
        document.minIn.m1v.value = "";
        document.minIn.m2v.value = "";
        document.minIn.m3v.value = "";
        document.minIn.b1v.value = "";
        document.minIn.b2v.value = "";
        document.minIn.b3v.value = "";
    }

    function nextMove(a) {
        if (playeR == "First") {
            playeR = "Second";
            var marK = "X";
            
        }
        else {
            playeR = "First";
            var marK = "O";
        }
        document.getElementById('whichplayer').innerHTML = playeR;

        switch (a) {
            case ('t1'): document.minIn.t1v.value = marK; break;
            case ('t2'): document.minIn.t2v.value = marK; break;
            case ('t3'): document.minIn.t3v.value = marK; break;
            case ('m1'): document.minIn.m1v.value = marK; break;
            case ('m2'): document.minIn.m2v.value = marK; break;
            case ('m3'): document.minIn.m3v.value = marK; break;
            case ('b1'): document.minIn.b1v.value = marK; break;
            case ('b2'): document.minIn.b2v.value = marK; break;
            case ('b3'): document.minIn.b3v.value = marK; break;
        }


        var checka = document.minIn.t1v.value;
        var checkb = document.minIn.t2v.value;
        var checkc = document.minIn.t3v.value;
        var checkd = document.minIn.m1v.value;
        var checke = document.minIn.m2v.value;
        var checkf = document.minIn.m3v.value;
        var checkg = document.minIn.b1v.value;
        var checkh = document.minIn.b2v.value;
        var checki = document.minIn.b3v.value;
        if ((checka == checkb) && (checkb == checkc)) {
            if (checka != "" || 0) { zed = 1; }
            else { zed = 0; }
        }
        else if ((checkd == checke) && (checke == checkf)) {
            if (checkd != "" || 0) { zed = 1; }
            else { zed = 0; }
        }
        else if ((checkg == checkh) && (checkh == checki)) {
            if (checkg != "" || 0) { zed = 1; }
            else { zed = 0; }
        }
        else if ((checka == checkd) && (checkd == checkg)) {
            if (checka != "" || 0) { zed = 1; }
            else { zed = 0; }
        }
        else if ((checkb == checke) && (checke == checkh)) {
            if (checkb != "" || 0) { zed = 1; }
            else { zed = 0; }
        }
        else if ((checkc == checkf) && (checkf == checki)) {
            if (checkc != "" || 0) { zed = 1; }
            else { zed = 0; }
        }
        else if ((checka == checke) && (checke == checki)) {
            if (checka != "" || 0) { zed = 1; }
            else { zed = 0; }
        }
        else if ((checkc == checke) && (checke == checkg)) {
            if (checkc != "" || 0) { zed = 1; }
            else { zed = 0; }
        }
        else {
            zed = 0;
        }
        if (zed == 1) {
            if (marK == "X") {
                alert("First player wins");
            }
            else {
                alert("Second player wins");
            }
        }
    }
    //timer
    var Timer;
    var TotalSeconds;


    function CreateTimer(TimerID, Time) {
        Timer = document.getElementById(TimerID);
        TotalSeconds = Time;

        UpdateTimer()
        window.setTimeout("Tick()", 1000);
    }
    function Tick() {
        if (TotalSeconds <= 0) {
            alert("Time's up!")
            return;
        }

        TotalSeconds -= 1;
        UpdateTimer()
        window.setTimeout("Tick()", 1000);
    }
    function UpdateTimer() {
        var Seconds = TotalSeconds;

        var Days = Math.floor(Seconds / 86400);
        Seconds -= Days * 86400;

        var Hours = Math.floor(Seconds / 3600);
        Seconds -= Hours * (3600);

        var Minutes = Math.floor(Seconds / 60);
        Seconds -= Minutes * (60);


        var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)


        Timer.innerHTML = TimeStr;
    }


    function LeadingZero(Time) {

        return (Time < 10) ? "0" + Time : +Time;

    }
</script>
</head>
<body onload="startOff()">
<h1>Tic-Tac-Toe</h1>
<p><span id="whichplayer"></span> player</p>
    <div id='timer'style="top: 10%;left: 80%; width: 174px;" ></div>

<form name="minIn">
<table>
<tr>
<td id="t1"><input type="text" name="t1v" onclick="nextMove('t1'),CreateTimer('timer', 5)" /></td>
<td id="t2"><input type="text" name="t2v" onclick="nextMove('t2'),CreateTimer('timer', 5)" /></td>
<td id="t3"><input type="text" name="t3v" onclick="nextMove('t3'),CreateTimer('timer', 5)" /></td>
</tr>


<tr>
<td id="m1"><input type="text" name="m1v" onclick="nextMove('m1'),CreateTimer('timer', 5)" /></td>
<td id="m2"><input type="text" name="m2v" onclick="nextMove('m2'),CreateTimer('timer', 5)" /></td>
<td id="m3"><input type="text" name="m3v" onclick="nextMove('m3'),CreateTimer('timer', 5)" /></td>
</tr>

<tr>
<td id="b1"><input type="text" name="b1v" onclick="nextMove('b1'),CreateTimer('timer', 5)" /></td>
<td id="b2"><input type="text" name="b2v" onclick="nextMove('b2'),CreateTimer('timer', 5)" /></td>
<td id="b3"><input type="text" name="b3v" onclick="nextMove('b3'),CreateTimer('timer', 5)" /></td>
</tr>

</table>
<input type="reset" value="CLEAR GAME" />
</form>
</body>
</html>

